<template>
    <card class="business">
        <img v-lazy="showImg(item.url)" alt="" class="bank">
        <div class="business-info" @click="goDetail(item)">
            <p class="bank-name">{{item.name}}</p>
            <p class="desc">年化{{
                            item.costMin
                          }}~{{item.costMax}}</p>
            <div class="tag-group">
                <span>{{item.repayType}}</span>
                <span>{{item.loansTime}}期</span>
            </div>
            <p class="price">最高{{item.quantityMax}}元</p>
        </div>
        <a href="javascript: void (0)" @click="handleApply(item)" class="btn">立即申请</a>
        <span class="tip">推荐</span>
    </card>
</template>

<script>
    export default {
        name: "business",
        props: {
            item: {
                type: Object,
                default: {}
            }
        },
        methods:{

            handleApply(item){
                console.log('申请');
                this.$emit('handleApply', item);
            },

            goDetail(item){
                this.$emit('go-detail', item);
            }
        }
    }
</script>

<style scoped lang="less">
    .business{
        background-color: #fff;
        display: flex;
        width: calc(100vw - @padding*2);
        margin-left: @padding;
        align-items: center;
        margin-bottom: @padding;
        padding: @padding;
        position: relative;
        box-sizing: border-box;
        justify-content: space-between;
        .tip{
            position: absolute;
            top: 10px;
            left: 10px;
            color: #fff;
            background: rgb(253,73,16);
            font-size: 8px;
            padding: 0 5px;
            border-radius: 3px;
            display: flex;
        }
        .bank{
            width: .74rem;
            //height: .74rem;
        }
        .business-info{
            flex: 1;
            margin-left: @padding;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            cursor: pointer;
            .bank-name{
                font-size: 14px;
                font-weight: 700;
            }
            .desc{
                color: #999;
                font-size: @small;
            }
            .tag-group{
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(255,236,227,1);
                    color: #FF6010;
                    margin-right: 5px;
                    padding: 0 3px;
                    border-radius: 3px;
                    font-size: 7px;
                }
            }
            .price{
                color: @price-color;
                font-size: @normal;
                margin-top: 6px;
                font-weight: 600;
            }
        }
        .btn{
            font-size: @mini;
            display: flex;
            align-items: center;
            justify-content: center;
            width: .75rem;
            height: .25rem;
            text-decoration: none;
            border: 1px solid @theme-color;
            color: @theme-color;
            border-radius: .25rem;
            background: #fff;
        }
    }
</style>
